.grid {
  position: relative;
  margin-bottom: 1rem;

  .full {
    width: 100%;
  }

  .half {
    width: 50%;
  }

  .third {
    width: 33.3%;
  }

  .quarter {
    width: 25%;
  }

  .fifth {
    width: 20%;
  }
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-sizer {
  padding: 0.5rem;
}

.grid-sizer,
.grid-item {
  width: 33.333%;
}

.grid-item {
  float: left;
  border-radius: 0.25rem;
  padding: 0.51rem;
}

.grid-item img {
  display: block;
  max-width: 100%;
}


.gallery {
  padding: 1rem;
  @include flexbox();
  @include flex-direction(column);

  img {
    border-radius: 0.25rem;
  }

  .grid-item {
    position: relative;
    opacity: 1;
    height: auto;
    cursor: pointer;
    
    @include flexbox();
    @include justify-content(center);

    &__desc {
      position: absolute;
      left: 0;
      top: 0;
      padding: 0.5rem;
      width: 100%;
      height: 100%;
      border-radius: 0.25rem;
      z-index: z('gallery-mask');
      font-family: $title-font;
      font-weight: 700;
      cursor: pointer;
      
      @include box-shadow(0, 0, 0, 0, rgba(0, 0, 0, 0));
      @include on-event {
        @include box-shadow(0, 4px, 4px, 0, rgba(0, 0, 0, 0.4));
        @include transition(all, 0.25s, ease);
        @include themify($themes) {
          color: themed('gallery-mask-color');
          background-color: themed('gallery-mask-background-color');
        }
      }

      &--text {
        position: absolute;
        left: 50%;
        top: 50%;
        word-wrap: break-word;
        
        @include flexbox();
        @include flex-direction(column);
        @include align-items(center);
        @include translate(-50%, -50%);
        @include themify($themes) {
          color: themed('link');
        }

        &::after {
          content: "➖🔍➖";
        }
      }
    }

    @media only screen and (max-width: 600px) {
      img {
        object-fit: cover;
        max-height: 300px;
      }
    }
  }
}